<template>
  <div>
    <h2>添加会员</h2>
    <a href="/show">会员显示</a>
    <table class="table">
      <tbody>
        <tr>
          <td>姓名</td>
          <td><input type="text" v-model="data.name" /></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="password" v-model="data.password" /></td>
        </tr>
        <tr>
          <td>性别</td>
          <td>
            <input
              type="radio"
              name="sex"
              value="1"
              v-model="data.sex"
              checked
            />男
            <input type="radio" name="sex" value="2" v-model="data.sex" />女
          </td>
        </tr> 
        <tr>
          <td>电话</td>
          <td><input type="text" v-model="data.phoneNumber" /></td>
        </tr>
        <tr>
          <td>年龄</td>
          <td><input type="text" v-model="data.age" /></td>
        </tr>
        <tr>
          <td>添加日期</td>
          <td><input type="date" v-model="data.createDate" /></td>
        </tr>
        <tr>
          <td>状态</td>
          <td>
            <input type="checkbox" v-model="data.state" checked />
            选择表示启用,未选择表示禁用
          </td>
        </tr>
        <tr>
          <td>会员等级</td>
          <td>
            <select v-model="data.memberLevelId">
              <option value="0">请选择</option>
              <option v-for="a in xlk" :value="a.id">
                {{ a.levelTitle }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td>头像</td>
          <td>
            <input type="file" @change="ImgUrl" />
            <img
              :src="'https://localhost:7192/' + data.img"
              style="height: 100px; width: 100px"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="button" value="添加" @click="add" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();

const ImgUrl = (e: any) => {
  var f = e.target.files[0];
  var fd = new FormData();
  fd.append("file", f);
  axios.post("https://localhost:7192/api/ImgUrl", fd).then((res) => {
    data.value.img = res.data;
  });
};

const data = ref({
  id: 0,
  name: "",
  password: "",
  sex: 0, 
  phoneNumber: "",
  age: 0,
  isDelete: true,
  createDate: "",
  state: true,
  memberLevelId: 0,
  img: "",
});
const xlk = ref([
  {
    id: 0,
    levelTitle: "",
    state: true,
  },
]);
const xlkk = () => {
  axios.get("https://localhost:7192/api/XLK").then((res) => {
    xlk.value = res.data;
  });
};
onMounted(() => {
  xlkk();
});

const add = () => {
  axios.post("https://localhost:7192/api/Mem/AddMem",data.value).then(res=>{
      if(res.data>0)
  {
     alert("添加成功")
     router.push({path:'/show'})
  }
  else if(res.data==-1)
  {
       alert("名称重复")
  }
  else{
      alert("添加失败")
  }
  })
};
</script>

<style scoped></style>
